<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .banner {
            width: 100%;
            height: 900px;
            position: relative;
        }

        .banner li {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }

        .banner img {
            width: 100%;
            display: none;
        }

        .banner li:nth-child(1) img {
            display: block;
        }

        .small img {
            width: 67px;
        }

        .list li {
            float: left;
            margin-right: 20px;
        }

        .container {
            position: relative;
        }

        .list {
            position: absolute;
            left: 50%;
            bottom: 50px;
            transform: translateX(-50%);
        }
    </style>
</head>

<body>
    <div class="container">
        <ul class="banner">
            <li>
                <img src="../DOM基础(一)/images/bigskin-1.jpg" alt="">
            </li>
            <li>
                <img src="../DOM基础(一)/images/bigskin-2.jpg" alt="">
            </li>
            <li>
                <img src="../DOM基础(一)/images/bigskin-3.jpg" alt="">
            </li>
            <li>
                <img src="../DOM基础(一)/images/bigskin-4.jpg" alt="">
            </li>
            <li>
                <img src="../DOM基础(一)/images/bigskin-5.jpg" alt="">
            </li>
        </ul>
        <ul class="list">
            <li class="small">
                <img src="../DOM基础(一)/images/smallskin-1.jpg" alt="" index=0>
            </li>
            <li class="small">
                <img src="../DOM基础(一)/images/smallskin-2.webp" alt="">
            </li>
            <li class="small">
                <img src="../DOM基础(一)/images/smallskin-3.webp" alt="">
            </li>
            <li class="small">
                <img src="../DOM基础(一)/images/smallskin-4.webp" alt="">
            </li>
            <li class="small">
                <img src="../DOM基础(一)/images/smallskin-5.webp" alt="">
            </li>
        </ul>
    </div>
    <script>
        // 获取元素
        var banners = document.querySelectorAll(".banner img");
        var smalls = document.querySelectorAll(".small img");

        // 点击小图片
        for (var i = 0; i < smalls.length; i++) {
            // for循环页面加载就执行
            // 事件是点击时候才触发
            // 点击事件触发时for循环结束,i变成了结束的值

            // 保存i值
            // 给smalls[i]添加一个属性,记录i值
            // 对象[属性名] = 属性值
            // 对象.属性名 = 属性值
            // 节点.setAttribute(属性名,属性值)
            smalls[i].index = i;
            smalls[i].onclick = function () {
                // this 绑定事件的元素
                /* 
                  i = 0   第一张大图
                  i = 1   第二张大图
                */
                // 获取到是第几张小图片,找到对应的大图片
                // 获取到的是一个伪数组形式,通过索引获取元素
                var j = this.index;
                console.log(this, this.index, banners[j]);

                // 排他思想
                // 让其他的图片不显示,让自己显示
                display();
                // 让大图片显示
                banners[j].style.display = "block";

            }
        }

        // 让所有的图片不显示
        function display() {
            for (var i = 0; i < banners.length; i++) {
                banners[i].style.display = "none";
            }
        }

    </script>
</body>

</html>